<template>
  <div class="shebao-detail-list">
    <a-button icon="left" type="link" @click="$router.go(-1)">返回</a-button>
    <a-row class="content-top">
      <!-- <step :current="0" /> -->
    </a-row>
    <navItem :options="tabs" @change="handleNav" />
    <!-- table -->
    <a-table
      :row-key="(a, b) => a.id"
      :columns="column"
      class="mg_t24"
      list-type="picture"
      :pagination="pagination"
      :data-source="dataSource"
      @change="handlePage"
    >
      <template slot="customName" slot-scope="text, record">
        <img v-if="record.noError" style="width: 24px" src="@/assets/img/shebaopaidan/Info2@2x.png" alt="" />
        <img v-else style="width: 24px" src="@/assets/img/shebaopaidan/Info-Circle@2x.png" alt="" />
        {{ record.name }}
      </template>
      <template slot="socEndDate" slot-scope="record">{{ moment(record).format("YYYY-MM-DD") }}</template>
      <template slot="fundEndDate" slot-scope="record">{{ moment(record).format("YYYY-MM-DD") }}</template>
      <template slot="assignCompanyName" slot-scope="record">
        <span class="primary">{{ record ? record : "--" }}</span>
      </template>
      <template slot="action" slot-scope="record">
        <span class="primary" @click="deleteItem(record)">删除</span>
      </template>
    </a-table>
    <a-row class="foot">
      <a-button type="primary" @click="reUpload">重新上传</a-button>
      <a-button @click="doNext">下一步</a-button>
    </a-row>
  </div>
</template>

<script>
const column = [
  {
    title: "姓名",
    dataIndex: "name",
    fixed: "left",
    scopedSlots: { customRender: "customName" }
  },
  { title: "参保城市", dataIndex: "socCityName" },
  { title: "身份证号", dataIndex: "idCard", width: 200 },
  { title: "参保方案", dataIndex: "socProgName" },

  {
    title: "社保停缴时间",
    dataIndex: "socEndDate",
    scopedSlots: { customRender: "socEndDate" }
  },
  {
    title: "公积金停缴时间",
    dataIndex: "fundEndDate",
    scopedSlots: { customRender: "fundEndDate" }
  },
  {
    title: "指派公司",
    dataIndex: "assignCompanyName",
    scopedSlots: { customRender: "assignCompanyName" }
  },
  { title: "操作", dataIndex: "", scopedSlots: { customRender: "action" } }
];
import step from "./common/step";
import navItem from "./common/nav-item";
export default {
  name: "ShebaoDetailList",
  components: {
    // step,
    navItem
  },
  data: function () {
    return {
      tabs: {},
      params: {
        pageSize: 10,
        pageNo: 1
      },
      column,
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      titles: {},
      dataSource: []
    };
  },
  created() {
    this.getList();
    this.getNavs();
  },
  methods: {
    getList() {
      const url = `/hr/api/v1/socDispatchEmpLesses`;
      this.$request({
        url,
        params: {
          ...this.params,
          socDispatchId: this.$route.query.id,
          showItem: true
        }
      }).then(({ data }) => {
        this.dataSource = data.entities;
        this.pagination.total = data.entityCount;
      });
    },
    getNavs() {
      this.$request({
        url: `/hr/api/v1/socDispatches/findDetails/${this.$route.query.id}`
      }).then(({ data }) => {
        this.tabs = data;
      });
    },
    selectItem(e) {},
    handlePage({ current }) {
      this.params.pageNo = current;
      this.getList();
    },
    handleNav(e) {},
    // 删除item
    deleteItem({ id }) {
      this.$confirm({
        title: "确定删除?",
        okType: "danger",
        onOk: () => {
          this.$request({
            url: `/hr/api/v1/socDispatchEmpLesses/${id}`,
            method: "delete"
          }).then(({ success }) => {
            if (success) {
              this.$notification["success"]({ message: "删除成功" });
              this.getList();
              this.getNavs();
            }
          });
        }
      });
    },
    // 重新上传
    reUpload() {
      this.$router.push("/shebao/shebaoPaidan/shebaoUpload");
    },
    // 下一页
    doNext() {
      const path = `/shebao/shebaoPaidan/shebao-detail-add-second-less`;
      this.$router.push({
        path,
        query: { ...this.$route.query }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-top {
  margin-top: 24px;
  padding: 40px 25%;
  background: #fafafa;
  border-radius: 4px;
}
.shebao-detail-list {
  padding: 24px;

  .foot {
    height: 64px;
    line-height: 64px;
    text-align: end;
  }
}
</style>
